<template>
  <div class="cshj-header">
    <div>
      <div class="left-wrappar" :style="{backgroundImage:'url('+require('../../assets/bg.gif')+')'}">
        <div class="pay" :style="{backgroundImage:'url('+require('../../assets/pay1.png')+')'}" @click="handlePay">
          <h2>在线充值</h2>
          <span>Pay Online</span>
        </div>
        <cshj-button v-for="(item, index) in loggers" :position="{ type: '0', index: index }" :key="index" :title="item"></cshj-button>
      </div>
    </div>

    <div class="middle-wrappar">
      <video-player  class="video-player-box vjs-custom-skin"
                     :class="autostart ? 'video-btn' : ''"
                     ref="videoPlayer"
                     :options="playerOptions"
                     :playsinline="true"
                     @pause="onPlayerPause($event)"></video-player>
    </div>

    <embed v-if="autostart" class="embed" src="https://cshj180.oss-cn-shenzhen.aliyuncs.com/Cloud%209.mp3" width=0 height=0 controls="ControlPanel" loop="100" autostart="true"/>
    <pay-dialog :dialogVisible="dialogVisible" @handleClose="handleClosePay"></pay-dialog>
  </div>
</template>

<script>

import CshjButton from '../../components/Button/index'
import cshj from '../../assets/cshj.png'
import PayDialog from '../../components/PayDialog/PayDialog'

export default {
  name: 'HeaderView',
  components: { PayDialog, CshjButton },
  data () {
    return {
      dialogVisible: false,
      autostart: true,
      loggers: ['登录器下载[网盘]', '登录器下载[本地]', '完整补丁[网盘1]', '完整补丁[网盘2]'],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: true, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4',
          src: 'https://cshj180.oss-cn-shenzhen.aliyuncs.com/video1.mp4' // url地址
        }],
        poster: cshj, // 你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: false // 全屏按钮
        }
      }
    }
  }, // http://cshj180.oss-cn-shenzhen.aliyuncs.com/%E5%AE%A3%E4%BC%A0%E8%A7%86%E9%A2%911.mp4
  methods: {
    // 视频停止后，开放音频
    onPlayerPause (player) {
      this.autostart = false
      this.player.muted(false)
    },
    // 显示去支付弹窗
    handlePay () {
      this.dialogVisible = true
    },
    // 关闭去支付弹窗
    handleClosePay () {
      this.dialogVisible = false
    },
    handleClick () {
      alert(123123)
    }
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  }
}
</script>

<style lang="scss">
  .video-js .vjs-big-play-button {
    top: 250px !important;
  }
  .video-btn {
    .video-js .vjs-mute-control {
      display: none !important;
    }
  }
</style>
<style lang="scss" scoped>
.cshj-header {
  display: flex;
  justify-content: space-between;
  width: 744px;
  margin-bottom: 20px;
  .left-wrappar {
    width: 154px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 10px;
    font-size: 14px;
    .pay {
      background-size: 100% 100%;
      width: 100%;
      height: 103px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &:hover {
        h2 {
          color: white;
          font-size: 24px;
        }
        span {
          color: white;
        }
        box-shadow: 3px 3px 4px #444;
      }
      h2 {
        color: $white;
        font-size: 22px;
      }
      span {
        line-height: 16px;
        font-size: 12px;
        font-family: 'times new roman', times, serif;
        color: #074955;
      }
    }
  }
  .middle-wrappar {
    display: flex;
    justify-content: center;
    .vjs-custom-skin {
      width: 570px;
      /*height: 550px;*/
    }
    /*.player {*/
      /*height: 100%;*/
      /*width: 100%;*/
    /*}*/
  }
  .right-wrappar {
    display: flex;
    justify-content: center;
    .swiper {
      width: 540px;
    }
  }
  .embed {
    position: absolute;
  }
}
</style>
